<template>
	<view class="container">
		<cu-custom style="background-color: #3D84FE; color: #fff;" bgColor="" :isBack="true">
			<block slot="content">月报审核</block>
			<view slot="right"  @tap="goShaixuan"><image src="../../static/icon/shaixuanwhite.png" style="width: 15px;height: 17px;"></image> </view>
		</cu-custom>
		<view class="projectHead">
			<view class="searchView">
				<view class="time uni-flex">
					<view class="timeText">3月</view><image class="shaixuanFont" src="../../static/icon/triangleFont.png"></image> 
				</view>
				<input class="searchProj" type="text" placeholder="请输入项目名称" />
				<view class="searchFont"><image src="../../static/icon/search.png"></image> </view>
			</view>
		</view>
		<view class="swiperHead">
		  <view class="swiperItem" :class="{swpHeadActiv:currentTabIndex===index}" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id" @click="CurrentTab(index)">
			<text class="swipText"> {{tab.name}}</text> <text class="swiperLine"></text>
		  </view>
		</view>
		<view class="cutLine"></view>
		<view class="uni-list" v-show="currentTabIndex==0">
			<view class="uni-list-cell" v-for="(item,index) in news" :key="index"  
			:data-newsid="item.newsid">
				<view class="uni-media-list">					
					<view class="uni-media-list-body">
						<view class="listContent" hover-class="uni-list-cell-hover" @tap="openinfo">
							<view class="uni-media-list-text-top titleText">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-list noData" v-show="currentTabIndex==1">
			<view class="imgBox"> <image class="noDataImg" style="width: 284px;height: 284px;" src="../../static/nodata.png"></image></view>
			<view class="smallText">您还没有已填的月报哦~</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
				  id: "tab01",
				  name: '待审月报',
				  statistical: '1'
				}, {
				  id: "tab02",
				  name: '已审月报',
				  statistical: '2'
				}],
				news : [],
				imgArr:[
					{src:"../../static/proj_three.png"},
					{src:"../../static/proj_two.png"},
					{src:"../../static/proj_one.png"}
				],
				total:0,
				jiankstate:1,
				guanzhustate:0,
				mapstate:1,
				currentTabIndex:0
			}
		},
		onLoad:function(){
			// uni.showLoading({
			// 	title:"加载中...."
			// })
			this.$http.get("/monthly/v1/listMonthly.do",{
							  params: ''
							  }).then(data=> {	
								 // debugger;								  
								    this.total = data.data.total || 0;
								              if(data.data.rows && data.data.rows.length) {
												   this.news = data.data.rows;
												   console.log(this.news);
												  this.news = this.news.map((item) => {
												  	  return {
												  	   newsid: item.projectId,
												  	   datetime: item.year+'年'+item.month+'月',
												  	   title: item.projectName,
												  	   image_url: item.image_url,
												  	   source: item.buildPropertyId,
												  	   comment_count: 0,
												  	   post_id: '',
												  	   month:item.month,
												  	   year:item.year,
												  	   buildTarget:item.buildTarget,
												  	   totalInvestment:item.totalInvestment,
												  	   planInvestment:item.planInvestment
												  	  };
												  	});	
													
								              }
									
							}).catch(e=>{
								if (this.news.length == 0) {
								   // this.isNoData = true;
								 }
								console.log("请求错误",e)
							});
							
		},
		methods: {
			CurrentTab(index){
				this.currentTabIndex = index;
			},
			
				//顶部导航筛选跳转
				goShaixuan(){
					uni.navigateTo({
						url:"../xmjz/shaixuan"
					})
				},
				openinfo(e) {
					var newsid = e.currentTarget.dataset.projectId;
					console.log(newsid)
					uni.navigateTo({
					    url: '/pages/xmjz/info?projectId=' + newsid
					});
				},
			
		}
	}
</script>

<style>
	@import "uni.css";
.projectHead{
		width: 100%;
		height: 64px;
		padding: 10px 20px;
		box-sizing: border-box;
		background-color:#3D84FE;
	}
	.searchView{
		width: 100%;
		height: 44px;
		background-color: #fff;
		border-radius: 22px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 23px;
		box-sizing: border-box;
	}
	.time{
		display: flex;
		align-items: center;
	}
	.timeText{
		color: #28435D;
		font-size: 16px;
	}
	.shaixuanFont{
		width: 9px;
		height: 6px;
		margin-left: 5px;
	}
	input.searchProj{
		width: 60%;
		height: 44px;
		line-height: 44px;
		margin-left: 10px;
	}
	input.searchProj::-webkit-input-placeholder{
		color: #B7B7B7;
	}
	.searchFont{
		width: 17px;
		height: 17px;
	}
	.searchFont image{
		width: 17px;
		height: 17px;
	}
	.swiperHead{
		width: 100%;
		height: 44px;
		display: flex;
		line-height: 44px;
		/* border-bottom: solid #E5E5E5 10px; */
	}
	.container{
		width: 100%;
	}
	.swiperItem{
		width: 50%;
		text-align: center;
		font-size: 36rpx;
		position: relative;
		color: #B7B7B7;
	}
	  page {
	    width: 100%;
	    min-height: 100%;
	    display: flex;
	  }
	  .swpHeadActiv .swipText{
		  color: #2A2A2A;
	  }
	.swiperLine{
		width: 26px;
		height: 4px;
		border-radius: 25px;
		background-color: #27A9FF;
		position: absolute;
		bottom: 0;
		left: 83px;
		display: none;
	}
	.swpHeadActiv .swiperLine{
		display: block;
	}
	.cutLine{
		width: 100%;
		height: 10px;
		background-color: #F5F6F7;
	}
	.uni-list-cell{
			border-bottom: solid #F5F6F7 10px;
		}
		.titleText{
			color: #28435D;
			font-size: 16px;
			line-height: 21px;
		}
		.infoText2{
			color: #93A0AD;
			font-size: 14px;
			line-height: 28px;
		}
		.infoText2:nth-child(2){
			margin-left: 20px;
		}
		.imgView{
			width: 100%;
			height: 90px;
			padding-bottom: 12px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
		}
		.imgBox{
			width: 30%;
			height: 78px;
		}
		.imgBox image{
			width: 100%;
			height: 78px;
		}
	.uni-media-list-body{height: auto;}
	.uni-media-list-text-top{line-height:1.6em;}
	.btomFont{
			width: 100%;
			height: 30px;
			padding: 0 20px;
			padding-bottom: 0;
			display: flex;
			justify-content: space-around;
			/* margin-top: 10px; */
		}
		.jiankongFont{
			width: 16px;
			height: 16px;
			
		}
		.btomFont_one{
			display: flex;
			align-items: center;
		}
		.btomFont_one>view{
			color: #93A0AD;
			font-size: 14px;
			margin-left: 6px;
		}
		.btomActive>view{
			color: #007AFF;
		}
		.noData{
			width: 100%;
			background-color: #fff;
			padding-top: 44.5px;
			height: 100vh;
			/* padding-left: 68.5px; */
		}
		.noData .imgBox{
			width: 100%;
			height: 284px !important; 
			display: flex;
			justify-content: center;
		}
		.noData .imgView .noDataImg{
			width: 284px;
			height: 284px;
		}
		.smallText{
			color: #28435D;
			font-size: 14px;
			width: 100%;
			text-align: center;
		}
		.attention{
			width: 162.5px;
			height: 41px;
			line-height: 41px;
			background-color:#3D84FE ;
			color: #fff;
			font-size: 14px;
			text-align: center;
			border-radius: 5px;
			margin-top: 20px;
		}
		.attentionBox{
			width: 100%;
			display: flex;
			justify-content: center;
		}
</style>
